import React from 'react';
import { useEffect } from 'react';
import { connect } from 'react-redux'
const Home = connect((state) => {
  return {
    bannerList: state.home.bannerList,
    proList: state.home.proList
  }
}, (dispatch) => {
  return {
    getBannerList () {
      fetch('http://121.89.205.189:3001/api/banner/list').then(res => res.json()).then(res => {
        console.log(res.data) // 只要count的值发生改变，useEffect就会重新执行
        dispatch({
          type: 'CHANGE_BANNER_LIST',
          payload: res.data
        })
      })
    },
    getProList () {
      fetch('http://121.89.205.189:3001/api/pro/list').then(res => res.json()).then(res => {
        console.log(res.data) // 只要count的值发生改变，useEffect就会重新执行
        dispatch({
          type: 'CHANGE_PRO_LIST',
          payload: res.data
        })
      })
    }
  }
})(({ bannerList, proList, getBannerList, getProList }) => {
  useEffect(() => {
    getBannerList()
    getProList()
  }, [getBannerList, getProList])
  return (
    <div>
      <h1>首页</h1>
      <ul>
        {
          bannerList && bannerList.map(item => (
            <img src = { item.img } key = { item.bannerid } alt="" style={{ height: 60 }}></img>
          ))
        }
      </ul>

      <ul>
        {
          proList && proList.map(item => (
            <li key = { item.proid }>{ item.proname }</li>
          ))
        }
      </ul>
    </div>
  );
});

export default Home;